<template>
  <div>
    <div>
      <el-input
          size="small"
          class="addPosInput"
          placeholder="添加..."
          prefix-icon="el-icon-plus"
          @keydown.enter.native="handleAdd"
          v-model="pos.name">
      </el-input>
      <el-button type="primary" size="small" @click="handleAdd">添加</el-button>
    </div>
    <div class="tableMain">
      <el-table
          border
          :data="positions"
          tooltip-effect="dark"
          style="width: 50%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职位"
            width="120">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间"
            width="200"
        >
        </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="showDialogView(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

      </el-table>
      <el-button type="danger" style="margin-top: 8px" size="small" :disabled="this.multipleSelection.length == 0" @click="handleDeleteMany">批量删除</el-button>
    </div>
    <el-dialog
        title="编辑职位"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-tag>职位名称</el-tag>
        <el-input size="small" v-model="updatePos.name" class="updatePosInput"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
    <el-button size="small" type="primary" @click="handleEdit">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "PosMana",
  data() {
    return {
      pos:{
        name:''
      },
      positions:[],
      dialogVisible:false,
      updatePos:{
        name:''
      },
      multipleSelection: []
    }
  },
  mounted() {
    this.initPositions();
  },
  methods:{

    handleDeleteMany() {
      this.$confirm('此操作将永久删除['+ this.multipleSelection.length +']条职位信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?'
        this.multipleSelection.forEach(data => {
            ids += 'ids=' + data.id + "&";
        })
        this.deleteRequest('/system/basic/pos/' + ids).then(resp => {
          if (resp) {
            this.initPositions();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

    /**
     * 添加职位
     */
    handleAdd() {
      if (this.pos.name) {
        this.postRequest('/system/basic/pos/',this.pos).then(res => {
          if (res) {
            this.initPositions();
            this.pos.name = '';
          }
        })
      }else {
        this.$message.error("请输入职位名称")
      }

    },

    handleEdit() {
      this.putRequest('/system/basic/pos/',this.updatePos).then(res => {
        if (res) {
          this.initPositions();
          this.dialogVisible = false;
        }
      })
    },

    /**
     * 修改职位
     * @param index 每行索引
     * @param data  每行数据
     */
    showDialogView(index,data) {
      // 给updatePos赋值
      Object.assign(this.updatePos,data);
      // 日期不更新
      this.updatePos.createDate = '';
        this.dialogVisible = true;
    },

    /**
     * 删除职位
     * @param index 每行索引
     * @param data  每行数据
     */
    handleDelete(index,data) {
      this.$confirm('此操作将永久删除['+ data.name +']职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/pos/' + data.id).then(resp => {
          if (resp) {
            this.initPositions();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    initPositions() {
      this.getRequest('/system/basic/pos/').then(resp => {
        if (resp) {
          this.positions = resp;
        }
      })
    }
  }
}
</script>

<style scoped>
    .addPosInput {
      width: 300px;
      margin-right: 8px;
    }
    .tableMain {
      margin-top: 20px;
    }
    .updatePosInput {
      width: 200px;
      margin-left: 8px;
    }
</style>